import React, {useState, useEffect, useMemo} from 'react';
import { useCmd, loc, filter_row, BtTxt, PanelFind, useHigh, GridTable } from 'sui';
import { PsnView } from './psn/view';
import { QbcView } from './calc/qbc';
import { reload_count } from './cmd';
import { useAccess } from 'cache';

const AwayView = () => {
    const [num, setNum] = useState();
    const [main, setMain] = useState();
    const [high] = useHigh(190, 100);
    const umd = useCmd();
    const [no_acc] = useAccess();

    useEffect(() => {
        reload_count(null, setMain, setNum);
    }, []);

    const getRow = useMemo(() => {
        const lst = ["sn"];
        return filter_row(main, lst, umd.filter);
    }, [main, umd.filter]);

    const hreturn = () => {
        reload_count(null, setMain, setNum);
        umd.hreturn();
    };

    if (umd.isFin("psn")) {
        return <PsnView cur={umd.cur} hreturn={hreturn} no_acc={no_acc}/>;
    }

    if (umd.isFin("qbc")) {
        return <QbcView cur={umd.cur} hreturn={hreturn} no_acc={no_acc} mod="qbc"/>;
    }

    if (umd.isFin("db")) {
        return <QbcView cur={umd.cur} hreturn={hreturn} no_acc={no_acc} mod="db"/>;
    }

    if (umd.isFin("dt")) {
        return <QbcView cur={umd.cur} hreturn={hreturn} no_acc={no_acc} mod="dt"/>;
    }

    const col = [
        {name: loc("l_193"), key: 'index', width: 70},
        {name: loc("l_363"), key: 'sn', width: 120},
        {name: loc("l_238"), key: 'e_opt', width: 260, formatter: (props) => {
            const d = props.row;
            return (
                <div className="inline-flex">
                    <BtTxt hcmd={() => umd.pact(null, d, "psn")}>{loc("l_818")}</BtTxt>
                    <BtTxt hcmd={() => umd.pact(null, d, "qbc")}>QBC</BtTxt>
                    <BtTxt hcmd={() => umd.pact(null, d, "db")}>DB</BtTxt>
                    <BtTxt hcmd={() => umd.pact(null, d, "dt")}>DT</BtTxt>
                </div>
            );
        }},
        {name: loc("l_127"), key: 'num', width: 100},
    ];

    const Left = () => (
        <div className="inline-flex items-center">
            {loc("l_818")}
            <div className="ml-10 bg-teal-300 px-3 pt-2 pb-1">{loc("l_127")}<span className="ml-6">{num}</span></div>
        </div>
    );

    return (
        <div className="flex flex-col">
            <PanelFind left={<Left/>} hcmd={v => umd.setFilter(v)}/>
            <GridTable high={high} col={col} row={getRow} rowHeight={45} gref={umd.gref}/>
        </div>
    );
};

export {AwayView};
